<template>
	<view class="exam-page">
		<view class="icon-back" @click="backPage">
			退出考试模式
		</view>
		
		<view v-if="!isExaming" class="no-exam">
			目前还没有考试安排
		</view>
		<template v-else>
			<view class="exam-content">
				<view class="exam-order">
					{{examInfo.textType}}
				</view>
				<view class="exam-subject">
					<view class="exam-box">
						 <view class="etitle">
						 	考试科目
						 </view>
						 <view class="einfo">
						 	{{examInfo.textSubject}}
						 </view>
					</view>
					<view class="exam-box">
						 <view class="etitle">
						 	监考老师
						 </view>
						 <view class="einfo">
						 	{{examInfo.invigilator}}
						 </view>
					</view>
					<view class="exam-box">
						 <view class="etitle">
						 	考试地点
						 </view>
						 <view class="einfo">
						 	{{examInfo.classrName}}教室
						 </view>
					</view>
				</view>
			</view>
			<view class="exam-notice-outer">
				<view class="exam-notice">
					<view class="ntitle">
						注意事项
					</view>
					<view class="exam-info">
						<rich-text :nodes="examInfo.textInstructions"></rich-text>
						
					</view>
				</view>
			</view>
			
		</template>
		
	</view>
</template>

<script>
	import { fetchData } from '../../utils/request';
	export default {
		data() {
			return {
				isExaming:false,
				examInfo:{}
			};
		},
		methods:{
			async getExamData(){
				let res = await fetchData({
				        url:'/database/text/api/banpailist',
				        method:'GET',
						data:{
							bpId:this.$store.state.deviceId
						}
				 })
				  if(res.code==200){ 
					  let datas = res.data
					  if(res.data.length){
						  this.isExaming = true;
						  this.examInfo = res.data[0];
					  }
				  }
			},
			backPage(){
				uni.navigateBack();
			}
		},
		mounted(){
			this.getExamData();
		}
	}
</script>

<style lang="scss" scoped>
.exam-page {
	height:100vh;
	width:100vw;
	//#ifdef APP-PLUS
	 overflow: hidden;
	//#endif
	background: url($imageurl+'/bg-exam.jpg') left -7.81upx no-repeat;
	background-size: cover;
	position: relative;
	text-align: center;
}

.exam-content {
	margin: 0 auto;
	width:597.66upx;
	text-align: left;
	padding-top: 39.06upx;
	position: relative;
	z-index: 100;
	.exam-order {
		font-weight: bold;
		font-size: 23.44upx;
		color: #333333;
		line-height: 23.44upx;
		margin-bottom: 7.81upx;
	}
	
	.exam-subject {
		display: flex;
		justify-content: space-between;
		margin-top:28.81upx;
		.exam-box {
			width:191.41upx;
			height:175.78upx;
			background: url($imageurl+'/card-bg.png') left top no-repeat;
			background-size: cover;
			box-sizing: border-box;
			padding: 7.81upx;
			.etitle {
				font-weight: bold;
				font-size: 16.41upx;
				line-height: 16.41upx;
				text-align: left;
				padding: 7.81upx 0 0 5upx;
				color: #2E34DA;
				 background: linear-gradient(to right, #1778D2, #2E34DA); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
				  -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
				  -webkit-text-fill-color: transparent;/*给文字设置成透明*/
			}
			.einfo {
				background: rgba(255,255,255,0.8);
				height:124upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 21.09upx;
				color: #333333;
				border-radius: 9.38upx;
				margin-top: 12upx;
			}
		}
	}
}
.exam-notice-outer {
	height:183.59upx;
	background: #4368DF;
	position: absolute;
	bottom: 0;
	left: 0;
	width:100%;
	color: #fff;
	text-align: center;
	.exam-notice {
		width:597.66upx;
		margin: 0 auto;
		padding-top: 12.72upx;
		.ntitle {
			font-size: 14.06upx;
			color: #FFFFFF;
			line-height: 14.06upx;
			text-align: left;
			padding-top:27upx;
		}
		.exam-info {
			margin-top: 15upx;
			width: 100%;
			background: rgba(255,255,255,0.25);
			border-radius: 6.25upx;
			box-sizing: border-box;
			padding: 10.81upx;
			
			font-weight: 500;
			font-size: 9.38upx;
			color: #FFFFFF;
			line-height: 18.63upx;
			text-align: left;
			display: flex;
			flex-direction: column;
			
		}
	}
}

.no-exam {
	font-size: 24.06upx;
	font-weight: bold;
	background: linear-gradient(to right, #1778D2, #2E34DA); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
	 -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
	 -webkit-text-fill-color: transparent;/*给文字设置成透明*/
	text-align: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	letter-spacing: 2px;
}
</style>
